<template>
  <div class="paramster-content">
    <Collapse v-model="collapseValue">
        <Panel name="1">
            <span>template</span>
            <div slot="content">
              <codemirror @input="handlerChange" v-model="template.template" :options="templateOptions"></codemirror>
            </div>
        </Panel>

        <Panel name="2">
            <span>style</span>
            <span style="font-size:12px;color:#999;">只对该组件生效<span @click.stop=""><i-switch @on-change="_handlerChange" size="small" v-model="template.scoped" ></i-switch></span></span>
            <div slot="content">
              <codemirror @input="handlerChange" v-model="template.style" :options="styleOptions"></codemirror>
            </div>
        </Panel>
    </Collapse>
  </div>
</template>

<script>
import { Vue, Component, Watch } from 'vue-property-decorator'
import {
  State,
  Getter,
  Action
} from 'vuex-class'
import {debounce} from 'lodash'
@Component
export default class FormTemplate extends Vue {
  @Getter curElement
  @Action actChangeElement

  templateOptions= {
    tabSize: 4,
    lineNumbers: true,
    line: true,
    mode: 'htmlembedded',
    theme: "monokai",
    autoCloseTags: true,
    mime: "application/x-ejs"
  }
  styleOptions= {
    tabSize: 4,
    lineNumbers: true,
    line: true,
    mode: 'text/css',
    theme: "monokai",
    autoCloseBrackets: true
  }
  template={
    template: "",
    style: "",
    scoped: false
  }

  collapseValue=["1", '2']

  @Watch('curElement')
  onElementChanged () {
    this.template = {...this.curElement.extra}
  }

  _handlerChange () {
    this.actChangeElement({...this.curElement, extra: this.template})
  }
  handlerChange :any=function () {}

  mounted () {
    this.onElementChanged()
    this.handlerChange = debounce(this._handlerChange, 500)
  }
}
</script>
